<template>
  <div class="track_the_playback">
    <!-- 地图 -->
    <div class="container" style="padding: 0px">
      <div id="map"></div>
    </div>
  </div>
</template>

<script>
import MapStr from '@/main.js'
// import tool from '@/Tool.js'
import { newMap } from '@/common/js/map.js'
import imgMarkerCLC from '@/assets/img/marker/markerImageCLC.png'
import imgMarkerRubbishPoint from '@/assets/img/marker/rubbishMarker1.png'
import imgMarkerRubbishPointPlan from '@/assets/img/marker/rubbishMarker2.png'
import startPlan from '@/assets/img/marker/STplan.png'
import startReal from '@/assets/img/marker/STreal.png'
import endPlan from '@/assets/img/marker/ENDplan.png'
import endReal from '@/assets/img/marker/ENDreal.png'
// import { filter } from 'vue/types/umd'
export default {
  data () {
    return {
      map: null,
      mapCursor: null,
      mapZoom: 20,
      selectCarVID: '',
      selectDate: '',
      carName: '',
      optionCarList: [],
      dataPlannedRoute: [],
      dataRealRoute: [],
      dataRubbishPoints: [],
      dataRubbishPointsReal: [],
      clcList: [],
      rubbishPointDetailDialogShow: false,
      MapV: {
        dataSetPlan: null,
        dataSetReal: null,
        dataSetPoint: null,
        mapVPlan: null,
        mapVReal: null,
        mapVPointIcon: null,
        mapVPointText: null,
      },
      markerStartPlan: null,
      markerStartReal: null,
      markerEndPlan: null,
      markerEndReal: null,
    }
  },
  mounted () {
    var data = this.$route.params.data
    this.selectCarVID = data.VID;
    this.dataRubbishPointsReal = data.DATAREAL
    this.dataRubbishPoints = []
    
    data.DATAPLAN.forEach(element => {
        var array = data.DATAREAL.filter(item => item.垃圾点名称 === element.PointName)
        if (array.length) {
          // element.DATAPLAN = array[0].PlanLinePoints
          // element.DATACOUNTPLAN = array[0].PlanLinePoints.length
          // element.WORKRATE = (100 * element.DATACOUNTREAL/element.DATACOUNTPLAN).toFixed(1) + '%'
          // this.tableData.unshift(element)
        }else{
          this.dataRubbishPoints.push(element)
        }
    });
    console.log(this.dataRubbishPoints)
    
    // 显示地图  
    this.mapShow()
    this.getClcList()
    this.getDataRealRoute()
    this.drawRubbishPoints()
    this.drawRubbishPointsPlan()
  },
  methods: {
    // 获取计划轨迹路线
    // async getDataPlannedRoute () {
    //   var url = 'DataListCompany/GetVehicleRubbishPlanLine?workdate=2021-11-01&vid=' + this.selectCarVID;
    //   console.log(url)
    //   const { data } = await this.$Http.get(url)
    //   this.dataRubbishPoints = data[0].PlanLinePoints;
    //   this.dataRubbishPointsReal = data[0].PlanLinePoints;
    //   this.drawRubbishPoints()
    //   // this.drawRubbishPoints()
    //   this.dataPlannedRoute = data[0].planLines;
    //   this.drawPicture()
    // },
    // 获取实际轨迹路线
    async getDataRealRoute () { // 16232
      const params = {
        VID: this.selectCarVID,
        // VID: 17050,
        startTime: '2021-11-01 00:00:00',
        endTime: '2021-11-01 23:59:59'
      }
      // 设置加载效果
      const loading = this.$loading({
        lock: true,
        text: '数据加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      })
      const { data } = await this.$Http.get('DataListCompany/GetVehicleHistoryInfoListApi', { params })
      loading.close()
      if (data.length != 0) {
        this.dataRealRoute = data
        this.drawPictureReal()
      } else {
        this.$message.error('未获取到轨迹');
      }
    },
    // 画途经垃圾点位
    drawRubbishPointsPlan () {
      const _self = this;
      let img = new Image();
      img.src = imgMarkerRubbishPointPlan
      img.onload = function () {
        //循环加载同一张图片的车辆数据
        let arrayImage = _self.dataRubbishPoints.map(v => {
          v.geometry = {
            type: 'Point',
            coordinates: [v.LONGITUDE, v.LATITUDE]
          }
          v.icon = img;
          v.text = v.PointName
          return v;
        })
        // if (_self.MapV.dataSetPoint) {
        //   _self.MapV.dataSetPoint.set(arrayImage);
        // } else {
          _self.MapV.dataSetPoint = new mapv.DataSet(arrayImage);
          let optionsICON = {
            draw: 'icon',
            width: 28, // 规定图像的宽度
            height: 32, // 规定图像的高度
            offset: { // 偏移值
              x: 0,
              y: 25
            }
          }
          let optionsTEXT = {
            draw: 'text',
            size: 14,
            avoid: true, // 开启文本标注避让
            textBaseline: 'middle',
            offset: { // 文本便宜值
              x: 0,
              y: 50
            }
          }
          new mapv.baiduMapLayer(_self.map, _self.MapV.dataSetPoint, optionsICON)
          new mapv.baiduMapLayer(_self.map, _self.MapV.dataSetPoint, optionsTEXT)
        // }
      }
    },
    // 画途经垃圾点位
    drawRubbishPoints () {
      const _self = this;
      let img = new Image();
      img.src = imgMarkerRubbishPoint
      img.onload = function () {
        //循环加载同一张图片的车辆数据
        let arrayImage = _self.dataRubbishPointsReal.map(v => {
          v.geometry = {
            type: 'Point',
            coordinates: [v.经度, v.纬度]
          }
          v.icon = img;
          v.text = v.垃圾点名称
          return v;
        })
        // if (_self.MapV.dataSetPoint) {
        //   _self.MapV.dataSetPoint.set(arrayImage);
        // } else {
          _self.MapV.dataSetPoint = new mapv.DataSet(arrayImage);
          let optionsICON = {
            draw: 'icon',
            width: 28, // 规定图像的宽度
            height: 32, // 规定图像的高度
            offset: { // 偏移值
              x: 0,
              y: 25
            }
          }
          let optionsTEXT = {
            draw: 'text',
            size: 14,
            avoid: true, // 开启文本标注避让
            textBaseline: 'middle',
            offset: { // 文本便宜值
              x: 0,
              y: 50
            }
          }
          new mapv.baiduMapLayer(_self.map, _self.MapV.dataSetPoint, optionsICON)
          new mapv.baiduMapLayer(_self.map, _self.MapV.dataSetPoint, optionsTEXT)
        // }
      }
    },
    drawPictureReal () {
      var pointArr = []
      var boundPoints = [];
      for (var i = 0; i < this.dataRealRoute.length; i++) {
        // for (var j = 0; j < this.dataRealRoute[i].Polyline.length; j++) {
        var item = this.dataRealRoute[i];
        pointArr.push([item.Lng, item.Lat])
        boundPoints.push(new BMap.Point(item.Lng, item.Lat))
        // }
      }
      this.map.setViewport(boundPoints);

      if (!this.markerStartReal) {
        // 创建Marker标注，使用小车图标
        this.markerStartReal = new BMap.Marker(boundPoints[0], { icon: new BMap.Icon(startReal, new BMap.Size(40, 40)) });
        this.markerEndReal = new BMap.Marker(boundPoints[boundPoints.length - 1], { icon: new BMap.Icon(endReal, new BMap.Size(40, 40)) });
        this.map.addOverlay(this.markerStartReal);
        this.map.addOverlay(this.markerEndReal);
      } else {
        this.markerStartReal.setPosition(boundPoints[0]);
        this.markerEndReal.setPosition(boundPoints[boundPoints.length - 1]);
      }

      if (this.MapV.dataSetReal) {
        this.MapV.dataSetReal.set({
          geometry: {
            type: 'LineString',
            coordinates: pointArr
          },
        });
      } else {
        this.MapV.dataSetReal = new mapv.DataSet({
          geometry: {
            type: 'LineString',
            coordinates: pointArr
          },
        });
        var options = {
          zIndex: -1,
          strokeStyle: 'rgba(255,0,0,0.6)',//47,79,79
          lineWidth: 4,
          lineJoin: 'round',
          draw: 'simple'
        }
        new mapv.baiduMapLayer(this.map, this.MapV.dataSetReal, options);
      }
    },
    // 画处理厂点位
    drawCLCPoints () {
      const _self = this;

      let img = new Image();
      img.src = imgMarkerCLC
      img.onload = function () {
        //循环加载同一张图片的车辆数据
        let arrayImage = _self.clcList.map(v => {
          v.geometry = {
            type: 'Point',
            coordinates: [v.LONGITUDE, v.LATITUDE]
          }
          v.icon = img;
          v.text = v.NAME
          return v;
        })
        // if (_self.MapV.dataSetPoint) {
        //   _self.MapV.dataSetPoint.set(arrayImage);
        // } else {
          var dataSetCLC = new mapv.DataSet(arrayImage);
          let optionsICON = {
            draw: 'icon',
            width: 40, // 规定图像的宽度
            height: 40, // 规定图像的高度
            offset: { // 偏移值
              x: 0,
              y: 15
            }
          }

          let optionsTEXT = {
            draw: 'text',
            size: 14,
            avoid: true, // 开启文本标注避让
            textBaseline: 'middle',
            offset: { // 文本便宜值
              x: 0,
              y: 50
            }
          }
          new mapv.baiduMapLayer(_self.map, dataSetCLC, optionsICON)
          new mapv.baiduMapLayer(_self.map, dataSetCLC, optionsTEXT)
        // }
      }
    },
    // 获取处理厂列表
    async getClcList () {
      const { data } = await this.$Http.get('/RubbishVehicle/getPlaceCLC?ClientNo=' + localStorage.getItem('CLIENT_NO'))
      this.clcList = data
      this.drawCLCPoints()
    },
    // 显示地图
    mapShow () {
      // 百度地图API功能
      this.map = newMap();
      this.map.centerAndZoom(new BMap.Point(localStorage.getItem('LNG'), localStorage.getItem('LAT')), this.mapZoom)// 初始化地图,设置中心点坐标和地图级别
    }
  }
}
</script>

<style scoped lang="less">
.track_the_playback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .around {
    padding: 10px 100px;
    height: 40px;
    background-color: #007acc;
    &:first-child {
      padding-left: 10px;
      height: 30px;
      // line-height: 30px;
      i {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        //width: 30px;
        height: 30px;
        line-height: 28px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        margin-right: 15px;
      }
      // .el-icon-s-operation {
      //   font-size: 22px;
      // }
    }
  }
  .container {
    flex: 1;
    #map {
      height: 100%;
      width: 100%;
    }
  }
}
.buttonI {
  border: 1px solid #fff;
  padding: 0px 8px;
  border-radius: 6px;
  margin-left: 15px;
}
</style>
